import type { ModalFuncProps } from 'ant-design-vue/lib/modal/Modal'
import type { ConfigProps, NotificationArgsProps } from 'ant-design-vue/lib/notification'

import { IconifyIcon } from '@vben/icons'
import { useI18n } from '@vben/locales'
import { isString } from '@vben/utils'

import { message as Message, Modal, notification } from 'ant-design-vue'

export interface NotifyApi {
    info(config: NotificationArgsProps): void
    success(config: NotificationArgsProps): void
    error(config: NotificationArgsProps): void
    warn(config: NotificationArgsProps): void
    warning(config: NotificationArgsProps): void
    open(args: NotificationArgsProps): void
    close(key: string): void
    config(options: ConfigProps): void
    destroy(): void
}

export declare type NotificationPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
export declare type IconType = 'error' | 'info' | 'success' | 'warning'
export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
    iconType: 'error' | 'info' | 'success' | 'warning'
}
export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>

function getIcon(iconType: string) {
    switch (iconType) {
        case 'info': {
            return (
                <IconifyIcon class="modal-icon-info anticon" icon="ant-design:info-circle-filled" />
            )
        }
        case 'success': {
            return (
                <IconifyIcon
                    class="modal-icon-success anticon"
                    icon="ant-design:check-circle-filled"
                />
            )
        }
        case 'warning': {
            return (
                <IconifyIcon
                    class="modal-icon-warning anticon"
                    icon="ant-design:info-circle-filled"
                />
            )
        }
        default: {
            return (
                <IconifyIcon
                    class="modal-icon-error anticon"
                    icon="ant-design:close-circle-filled"
                />
            )
        }
    }
}

function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
    return isString(content) ? <div innerHTML={`<div>${content as string}</div>`}></div> : content
}

/**
 * @description: Create confirmation box
 */
function createConfirm(options: ModalOptionsEx) {
    const iconType = options.iconType || 'warning'
    Reflect.deleteProperty(options, 'iconType')

    const opt: ModalFuncProps = {
        centered: true,
        icon: getIcon(iconType),
        ...options,
        content: renderContent(options)
    }
    return Modal.confirm(opt)
}

const getBaseOptions = () => {
    const { t } = useI18n()
    return {
        okText: t('common.okText'),
        centered: true
    }
}

function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOptionsPartial {
    return {
        ...getBaseOptions(),
        ...options,
        content: renderContent(options),
        icon: getIcon(icon)
    }
}

function createSuccessModal(options: ModalOptionsPartial) {
    return Modal.success(createModalOptions(options, 'success'))
}

function createErrorModal(options: ModalOptionsPartial) {
    return Modal.error(createModalOptions(options, 'error'))
}

function createInfoModal(options: ModalOptionsPartial) {
    return Modal.info(createModalOptions(options, 'info'))
}

function createWarningModal(options: ModalOptionsPartial) {
    return Modal.warning(createModalOptions(options, 'warning'))
}

notification.config({
    placement: 'topRight',
    duration: 3
})

/**
 * @description: message
 */
export function useMessage() {
    return {
        createMessage: Message,
        notification: notification as NotifyApi,
        createConfirm,
        createSuccessModal,
        createErrorModal,
        createInfoModal,
        createWarningModal
    }
}
